<template>
  <div class="Articlefl maincon">
    <!-- 搜索 -->
    <el-card shadow="hover" class="topsearch">
      <el-row>
        <el-form :inline="true" ref="types" >
          <el-form-item label="年龄筛选">
            <el-select
                size="small"
                style="width: 100%"
                v-model="types.tid"
                placeholder="请选择所属年龄段"
                @change="changtype(types.tid)"
            >
              <el-option
                  v-for="(item, index) in types"
                  :key="index"
                  :label="item.agetext"
                  :value="item.tid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜谱名搜索">
            <el-input
                size="small"
                v-model="name"
                placeholder="输入菜谱标题"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getAll"
            >搜索</el-button
            >
            <el-button size="small" icon="el-icon-refresh" @click="resetForm"
            >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <!-- table -->
    <el-card shadow="hover" class="treetable">
      <el-table
          v-loading="loading"
          element-loading-text="耗尽脑汁加载中"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
      >
        <el-table-column prop="name" label="标题" width="150"></el-table-column>
        <el-table-column prop="id" label="菜谱ID" width="120"></el-table-column>
        <el-table-column label="描述" align="content" >
          <template slot-scope="scope">
            <el-button type="primary" plain @click="view(scope.row.content)">详细内容</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="发布人"> </el-table-column>
        <el-table-column prop="time" label="添加时间"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
              <el-button type="warning" plain @click="handleEdit(scope.row)">编辑<i class="el-icon-edit" ></i></el-button>
              <el-popconfirm
                  confirm-button-text='确定'
                  cancel-button-text='我再想想'
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"
                  @confirm="handleDelete(scope.row.id)"
              >
                <el-button type="danger" plain style="margin-left: 10px" slot="reference">删除<i class="el-icon-close"></i></el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5,10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>


    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="80%"
        >
      <el-form label-width="80px"   ref="form" :model="form">
        <el-form-item label="菜谱标题" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="菜谱概述" >
          <el-input v-model="form.summary" ></el-input>
        </el-form-item>
        <el-form-item label="年龄段" >
          <el-select v-model="form.tid" placeholder="请选择">
            <el-option
                v-for="item in  types"
                :key="item.id"
                :label="item.agetext"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜谱内容" >
            <mavon-editor ref="md" style="height: 100%" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible2=true">设为首页轮播图</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
  </span>
    </el-dialog>


<!--    轮播图-->
    <el-dialog
        title="轮播图设置"
        :visible.sync="dialogVisible2"
        width="30%"
    >
      <span style="color: #78a5c5">请选择封面</span>
      <el-upload
          class="avatar-uploader"
          action="http://localhost:9090/files/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
      >
        <img v-if="this.imgurl" :src="imgurl" style="width: 80%; height: 80%">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="announcementFlase">取 消</el-button>
        <el-button type="primary" @click="announcement">确 定</el-button>
  </span>
    </el-dialog>


<!--    文章预览框-->
    <el-dialog title="菜谱预览" :visible.sync="viewDialogVis" width="60%" >
      <el-card>
        <div>
          <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
              index
          />
        </div>
      </el-card>
    </el-dialog>
  </div>
  <!--  预览窗口-->
</template>

<script>
import request from "@/router/request";

export default {
name: "articleFood",
    data(){
    return{
      form:{},
      name:"",
      imgurl:"",
      cover:3,
      total:0,
      pageNum:1,
      pageSize:5,
      viewDialogVis: false,
      dialogVisible: false,
      dialogVisible2: false,
      types:{},
      tableData: [],
      announcement1:{}
    }
    },
    created() {
      this.typeText()
      this.getAll()
    },
    methods:{
      //加载年龄标签
      typeText(){
        request.get("/type").then(res=>{
          this.types=res.data
        })
      },
      //根据type的id查询文章
      changtype(tid){
        request.get("/article/pageCoverSreach",{
          params:{
            tid: tid,
            cover:this.cover
          }
        }).then(res=>{
          this.tableData = res.data.records
        })
      },
      //查询所有
      getAll(){
        request.get("/article/pageCoverSreach",{
          params:{
            pageNum: this.pageNum,
            pageSize:this.pageSize,
            name:this.name,
            cover:this.cover
          }
        }).then(res=>{
          this.tableData=res.data.records
          this.total = res.data.total
          this.typeText()
        })
      },
      //查看详情
      view(content) {
        console.log(content)
        this.content = content
        this.viewDialogVis = true
      },
      // 重置
      resetForm() {
        this.name = null;
        this.getAll()

      },

      //修改弹窗
      handleEdit(row){
        this.form = JSON.parse(JSON.stringify(row)),//赋予数据
            console.log("获取到的数据为："+this.form)
            this.dialogVisible = true//打开
      },

      handleSave(){
        const form = this.form
        // form.uid = this.user.id
        console.log("此文章用户的id为"+this.form)
        request.put("/article",form).then(res =>{
          console.log(res)
          if(res){
            this.$message.success("保存成功！")
          }else{
            this.$message.error("保存失败！")
          }
          this.dialogVisible = false,
              this.form = {}
          this.getAll()
        })
      },

      //图片上传时修改上传的路径
      imgAdd(pos, $file) {
        let $vm = this.$refs.md
        // 第一步.将图片上传到服务器.
        const formData = new FormData();
        formData.append('file', $file);
        request({
          url: '/files/upload',
          method: 'post',
          data: formData,
          headers: {'Content-Type': 'multipart/form-data'},
        }).then((res) => {
          // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
          $vm.$img2Url(pos, res.data);
        })
      },
      //删除
      handleDelete(id){
        request.delete("/article/"+id).then(res =>{
          if(res){
            this.$message.success("删除成功！")
          }else{
            this.$message.error("删除失败！")
          }
          this.getAll()
        })
      },


      ////图片上传
      handleAvatarSuccess(res){
        console.log(res)
        this.imgurl=res.data
      },

      //新增轮播图
      announcement(){
        this.announcement1.imag=this.imgurl
        if (!this.announcement1.imag){
          console.log(this.$message.error("首页图片不能为空"))
          return
        }
        this.announcement1.aid=this.form.id
        request.post("/announcement",this.announcement1).then(res=>{
          if (res.state==='0'){
            console.log(this.$message.success("设置成功赶快去看看吧"));
            this.imgurl=""
            this.announcement1={}
            this.dialogVisible2= false
            this.dialogVisible= false
          }else {
            console.log(this.$message.error(res.message))
          }
        })
      },

      //取消按键
      announcementFlase(){
        this.imgurl=""
        this.dialogVisible2=false
      },
      //分页
      handleSizeChange(pageSize){
        this.pageSize=pageSize
        //之后请求数据
        this.getAll()
      },
      handleCurrentChange(pageNum){
        console.log(pageNum)
        this.pageNum=pageNum
        this.getAll()
      },
    },
}
</script>

<style lang='scss' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.Articlefl {
  .topsearch {
    height: 15%;
    .el-form-item {
      // margin-bottom: 0;
    }
  }
  .treetable {
    margin-top: 20px;
    height: calc(100% - 15% - 20px);
    // max-height: calc(90% - 20px);
    overflow-y: auto;
    // padding-bottom: 50px;

    ::v-deep .el-table .myNoteBox .cell {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    .clearfix {
      span {
        font-weight: bold;
      }
    }
  }

  ::v-deep .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__body {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              .quill-editor {
                .ql-container {
                  height: 200px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
